<template>
    <div class="statistics">
        <el-title :title="title"></el-title>
        <div class="statistics_cn">
            <!-- 搜索 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="单位分类:">
                    <el-select v-model="cateListType" filterable @change="changeUserUnit">
                        <el-option
                        v-for="item in cateList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="发布单位:">
                    <el-select v-model="formInline.release" multiple filterable placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.realname"
                        :value="item.userid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="协同治理单位:">
                    <el-select v-model="formInline.handle" multiple filterable placeholder="请选择">
                        <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.realname"
                        :value="item.userid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="事项类别:">
                    <el-select v-model="formInline.itemType" clearable filterable placeholder="请选择" @change="nowChangs">
                        <el-option
                        v-for="item in danList"
                        :key="item.value"
                        :label="item.class_name"
                        :value="item.class_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="清单事项名称:">
                    <el-select v-model="formInline.list" clearable filterable placeholder="请选择">
                        <el-option
                        v-for="item in optionsd"
                        :key="item.value"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间期限:">
                     <el-date-picker
                        v-model="formInline.date"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="其他:">
                    <el-input v-model="formInline.more" placeholder=""></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                    <!-- <el-button type="primary" @click="getStatisticsList(1)">市直</el-button>
                    <el-button type="primary" @click="getStatisticsList(2)">镇街</el-button> -->
                </el-form-item>
            </el-form>
            <!-- 统计 -->
            <div class="stica">
                <!-- <div class="stica_title">
                    <p>任务数量</p>
                </div>
                <ul>
                    <li>
                        <i class="iconfont icon-yichuli"></i>
                        <router-link :to="{path:'/data',query:{id:'3',realname:this.formInline.release,dispose:this.formInline.handle,itemType:this.formInline.itemType,genre:this.formInline.list,stime:this.formInline.date[0],etime:this.formInline.date[1]}}">
                            <span>已完成</span>
                            <p>{{numsOne.complet}}</p>
                        </router-link>
                    </li>
                    <li>
                        <i class="iconfont icon-weichuli"></i>
                        <router-link :to="{path:'/data',query:{id:'1',realname:this.formInline.release,dispose:this.formInline.handle,itemType:this.formInline.itemType,genre:this.formInline.list,stime:this.formInline.date[0],etime:this.formInline.date[1]}}">
                            <span>处理中</span>
                            <p>{{numsOne.process}}</p>
                        </router-link>
                    </li>
                    <li>
                        <i class="iconfont icon-bohui"></i>
                        <router-link :to="{path:'/data',query:{id:'-1',realname:this.formInline.release,dispose:this.formInline.handle,itemType:this.formInline.itemType,genre:this.formInline.list,stime:this.formInline.date[0],etime:this.formInline.date[1]}}">
                            <span>驳回</span>
                            <p>{{numsOne.return}}</p>
                        </router-link>
                    </li>
                </ul>
                <div class="stica_title">
                    <p>任务评分</p>
                </div>
                <ul>
                    <li>
                        <i class="iconfont icon-smiling"></i>
                        <router-link :to="{path:'/data',query:{name:'3',realname:this.formInline.release,dispose:this.formInline.handle,itemType:this.formInline.itemType,genre:this.formInline.list,stime:this.formInline.date[0],etime:this.formInline.date[1]}}">
                            <span>满意</span>
                            <p>{{numsOne.satisfy}}</p>
                        </router-link>
                    </li>
                    <li>
                        <i class="iconfont icon-huiyuanmanyidu"></i>
                        <router-link :to="{path:'/data',query:{name:'2',realname:this.formInline.release,dispose:this.formInline.handle,itemType:this.formInline.itemType,genre:this.formInline.list,stime:this.formInline.date[0],etime:this.formInline.date[1]}}">
                            <span>基本满意</span>
                            <p>{{numsOne.somewhatSatisfi}}</p>
                        </router-link>
                    </li>
                    <li>
                        <i class="iconfont icon-manyidu"></i>
                        <router-link :to="{path:'/data',query:{name:'1',realname:this.formInline.release,dispose:this.formInline.handle,itemType:this.formInline.itemType,genre:this.formInline.list,stime:this.formInline.date[0],etime:this.formInline.date[1]}}">
                            <span>不满意</span>
                            <p>{{numsOne.dissatisfi}}</p>
                        </router-link>
                    </li>
                </ul> -->
                <div class="table_box">
                  <div class="head_tls">
                    <div class="t_name">单位名称</div>
                    <div class="t_w1">发布问题</div>
                    <div class="t_w1">已完成</div>
                    <div class="t_w1">处理中</div>
                    <div class="t_w1">未处理</div>
                    <div class="t_w1">驳回</div>
                    <div class="t_w1">满意</div>
                    <div class="t_w1">基本满意</div>
                    <div class="t_w1">不满意</div>
                  </div>
                  <ul class="list_info" v-if="taticListShow">
                    <li v-for="(item, index) in taticList" :key="index">
                      <div class="t_name" :title="item.realname" @click="getGroundFloorList(item.realname)">{{item.realname}}</div>
                      <div class="t_w1">{{item.sywt}}</div>
                      <div class="t_w1">{{item.ywc}}</div>
                      <div class="t_w1">{{item.clz}}</div>
                      <div class="t_w1">{{item.wcl}}</div>
                      <div class="t_w1">{{item.th}}</div>
                      <div class="t_w1">{{item.my}}</div>
                      <div class="t_w1">{{item.jbmy}}</div>
                      <div class="t_w1">{{item.bmy}}</div>
                    </li>
                  </ul>
                  <div class="totals" v-if="taticListShow">
                    <div class="t_name">合计</div>
                    <div class="t_w1">{{taticTotal.sywt}}</div>
                    <div class="t_w1">{{taticTotal.ywc}}</div>
                    <div class="t_w1">{{taticTotal.clz}}</div>
                    <div class="t_w1">{{taticTotal.wcl}}</div>
                    <div class="t_w1">{{taticTotal.th}}</div>
                    <div class="t_w1">{{taticTotal.my}}</div>
                    <div class="t_w1">{{taticTotal.jbmy}}</div>
                    <div class="t_w1">{{taticTotal.bmy}}</div>
                  </div>
                  <div class="empty" v-else>
                    暂无数据
                  </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
import elTitle from '@/components/title'
import {userUnits,getunit,zjUnits,itemNameList,projectmain, apiassociat, statisticInfo} from '@/utils/index.js'
export default {
    data(){
        return{
            title:'数据统计',
            formInline:{
                release:'',
                handle:'',
                itemType: '',
                list:'',
                date:''
                // more:''
            },
            numsOne:[],
            options:[],
            options1:[],
            optionsd:[],
            danList:[],
            // 2021.11.17 最新统计数据
            taticList: [],
            taticTotal: {},
            
            // 当前是否有统计数据
            taticListShow: true,
            cateList: [
              {id:1, name: "市直"},
              {id:2, name: "镇街"},
              {id:3,name:'协调监督'}
            ],
            // 默认市值
            cateListType: 1,

        }
    },
    created(){
        // userUnit(
          
        // ).then((res)=>{
        //     console.log(res)
        //     this.options = res.data
        // }) 
        // 统计
        // statistics().then((res)=>{
        //     console.log(res)
        //     this.numsOne = res.data
        // })
        // 事项类别
        projectmain().then((res)=>{
            // console.log(res)
            this.danList = res.data
            console.log(this.danList)
        })
        // 获取事项
        itemNameList().then((res)=>{
            // console.log(res)
            this.optionsd = res.data.data
        })
        // 默认市值  市值：1  镇街：2
        this.getStatisticsList(1)
        this.getUserUnit(1)
        this.getUserUnits()
    },
    components:{
        elTitle
    },
    methods:{
       onSubmit() {
        statisticInfo({
            id: this.cateListType,
            realname:this.formInline.release,
            dispose:this.formInline.handle,
            itemType:this.formInline.itemType,
            genre:this.formInline.list,
            stime:this.formInline.date[0],
            etime:this.formInline.date[1]
        }).then((res)=>{
          if(res.code == 0){
            if(res.data.list.length != 0){
              this.taticList = res.data.list
              this.taticTotal = res.data.zong
              this.taticListShow = true
            }else{
              this.taticListShow = false
            }
          }else{
            this.taticListShow = false
          }
        })
      },
      
      //选择事项类别，获取对应的事项名称
      nowChangs() {
        console.log(this.formInline.itemType)
        apiassociat({
            class_id:this.formInline.itemType
        }).then((res)=>{
            // console.log(res)
            this.optionsd = res.data  
            this.formInline.list = ''
        })
      },

      // 2021.11.17 选择分类后，后面的筛选内容重新请求
      changeUserUnit() {
        // console.log("===========================")
        // console.log(this.cateListType)
        this.getUserUnit(this.cateListType)
        this.getStatisticsList(this.cateListType)
      },

      // 2021.11.17 发布单位内容请求，用于搜索
      getUserUnit(id) {
        getunit({
          id: id
        }).then((res)=>{
            // console.log(res)
            this.options = res.data
        })
      },

      // 2021.11.18 协同治理单位，用于搜索
      getUserUnits() {
        userUnits().then((res)=>{
            // console.log(res)
            this.options1 = res.data
        })
      },

      // 2021.11.17 最新获取统计数据
      getStatisticsList(id) {
        // 获取最新统计数据
        statisticInfo({id: id}).then((res)=>{
          // console.log(res)
          if(res.code == 0){
            if(res.data.list.length != 0){
              this.taticList = res.data.list
              this.taticTotal = res.data.zong
              this.taticListShow = true
            }else{
              this.taticListShow = false
            }
          }else{
            this.taticListShow = false
          }
        })
      },
      // 获取镇街id,获取镇街下面的街道数据
      getGroundFloorList(name) {
        this.taticList.forEach(item => {
          if(item.dept_name == name) {
            console.log(item.dept_id)
            zjUnits({id: item.dept_id}).then((res)=> {
              if(res.code == 0){
                if(res.data.list.list.length != 0){
                  this.taticList = res.data.list.list
                  this.taticTotal = res.data.list
                  this.taticListShow = true
                }else{
                  this.taticListShow = false
                }
              }else{
                this.taticListShow = false
              }
            })
          }
        });
      }
    }
}
</script>

<style lang="scss" scoped>
.statistics_cn::v-deep{
    width: 100%;
    padding: 40px;
    box-sizing: border-box;
    margin-top: 20px;
    background-color: white;
    .el-form-item{
        margin-right: 30px;
    }
}
li{
  list-style: none;
}
.stica{
    background-color: #f5f5f5;
    padding: 30px 15px;
    .stica_title{
        padding-left: 25px;
        padding-bottom: 20px;
    }
    .stica_title:nth-child(n+1){
        margin-top: 20px;
    }
    // ul{
    //     display: flex;
    //     justify-content: space-around;
    //     li:nth-child(2){
    //         i{
    //             color: #1ac2c4;
    //         }
    //     }
    //     li:nth-child(3){
    //         i{
    //             color:red;
    //         }
    //     }
    //     li{
    //         list-style: none;
    //         width: 30%;
    //         height: 100px;
    //         background-color: white;
            
    //         line-height: 100px;
    //         a{
    //             color: #333;
    //         }
    //         i{
    //             font-size: 40px;
    //             vertical-align: middle;
    //             padding-right: 20px;
    //             padding-left: 20px;
    //             color: #32bf52;
    //         }
    //         span{
    //             display: inline-block;
    //             font-size: 16px;
    //             vertical-align: middle;
    //             padding-left: 30px;
    //         }
    //         p{
    //             display: inline-block;
    //             font: 19px STHupo;
    //             padding-left: 7px;
    //             vertical-align: middle;
    //             font-weight: 700;
    //             color: #2bbf52;
    //         }
    //     }
    //     li:nth-child(2){
    //         p{
    //             color: #1ac2c4;
    //         }
    //     }
    //     li:nth-child(3){
    //         p{
    //             color: red;
    //         }
    //     }
    // }

    .table_box {
      width: 100%;
      border-top: 2px solid #ccc;
      border-left: 2px solid #ccc;
      .head_tls {
        height: 45px;
        line-height: 45px;
        display: flex;
        align-items: center;
        background-color: #E6E6E6;
        font-weight: 600;
        div{
          box-sizing: border-box;
          border-right: 2px solid #ccc;
          border-bottom: 2px solid #ccc
        }
      }

      .list_info {
        li {
          height: 45px;
          line-height: 45px;
          display: flex;
          align-items: center;
          div{
            box-sizing: border-box;
            border-right: 2px solid #ccc;
            border-bottom: 2px solid #ccc
          }
          // div:last-child {
          //   border-right: 0;
          // }
        }
      }
      .totals {
        height: 45px;
        line-height: 45px;
        display: flex;
        align-items: center;
        font-weight: 600;
        div{
          box-sizing: border-box;
          border-right: 2px solid #ccc;
          border-bottom: 2px solid #ccc
        }
      }
      // div:last-child {
      //   border-right: 0;
      // }
      .t_name {
        width: 30%;
        cursor: pointer;
        text-align: center;
        box-sizing: border-box;
        padding: 0 5px 0 10px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .t_w1 {
        width: 10%;
        text-align: center;
      }

      .empty {
        border-right: 2px solid #ccc;
        border-bottom: 2px solid #ccc;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        font-size: 18px;
      }
    }
}

</style>